<template>
  <view class="upload_com">
    <!-- 导航栏 -->
    <NavBar :title="Title" />
    <view class="upload_page">
      <view class="upload_info border_bottom">
        <view class="title"> <text class="mast">*</text> 名称</view>
        <view class="right">
          <input
            style="text-align: right"
            v-model="uploadName"
            placeholder="请填写"
            :disabled="isHasVal"
          />
        </view>
      </view>
      <view class="upload_info border_bottom">
        <view class="title"><text class="mast">*</text>上传时间</view>
        <view class="right">{{ uploadTime }}</view>
      </view>
      <view class="upload_info border_bottom">
        <view class="title"><text class="mast">*</text>上传人</view>
        <view class="right">{{ uploadUser }}</view>
      </view>
      <view class="border_bottom">
        <view class="upload_info">
          <view class="title"><text class="mast">*</text>附件</view>
          <view class="right" v-if="!isHasVal">
            <lsj-upload
              ref="lsjUpload"
              childId="upload1"
              :size="uploadconfig2.size"
              :instantly="uploadconfig2.instantly"
              :formats="uploadconfig2.formats"
              :option="option"
              @uploadEnd="onuploadEnd"
              @progress="fileProgress"
              @fail="failFile"
            >
              <view style="width: 100%; text-align: right; color: #0b847b">
                <i
                  class="iconfont icon-24gf-folderOpen"
                  style="color: #0b847b"
                ></i>
                上传
              </view>
            </lsj-upload>
          </view>
        </view>
        <progress v-if="percent !=0&&percent !=100" :percent="percent" show-info stroke-width="3" />
        <!-- <view class="upload_file" v-show="accessoryUrl.length">
          <view v-for="(i, index) in accessoryUrl" :key="index">
            <view class="title" @click="prevFileBnt(i)">
              <i class="iconfont icon-24gf-folderOpen"></i>
              {{ i.accessoryName }}
            </view>
            <view class="close" v-if="!isHasVal">
              <i class="iconfont icon-close" @click="delUploadFile(i)"></i>
            </view>
          </view>
        </view> -->

        <view v-if="accessoryUrl.length">
          <view
            class="file_list"
            v-for="(item, index) in accessoryUrl"
            :key="index"
          >
            <view @click="prevFileBnt(item)" class="file_list_item">
              <view>
                <i
                  class="iconfont icon-24gf-folderOpen"
                  style="color: #0b847b"
                ></i>
                {{ item.accessoryName }}</view
              >
            </view>
            <view
              v-if="!isHasVal"
              class="iconfont icon-close"
              @click="delUploadFile(index)"
            ></view>
          </view>
        </view>
      </view>
      <view class="upload_btns" v-show="accessoryUrl.length != '' && !isHasVal">
        <button type="primary" style="background: #d3d3d3" @click="reset">
          取 消
        </button>
        <button
          type="primary"
          @click="uploadFileBtn"
          :disabled="uploadBtnLoading"
        >
          确 定
        </button>
      </view>
      <!-- <view class="upload_btns" v-show="isHasVal">
        <button
          type="primary"
          style="background: #d3d3d3"
          @click="delUploadFile"
        >
          下载
        </button>
        <button
          type="primary"
          @click="uploadFileBtn"
          :disabled="uploadBtnLoading"
        >
          删 除
        </button>
      </view> -->
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { getDateFn } from "../../utils/fun.js";

import {
  apiUploadCommunication, //上传宣传通讯
} from "../../net/dagnqunhuodong.js";

import { uploadconfig2 } from "../../const";
import {
  prevFile, // 预览文件
} from "../../utils/preview.js";

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      uploadconfig2,
      // 上传接口参数
      option: {
        url: uploadconfig2.url,
        name: "file",
        header: {
          Authorization: uni.getStorageSync("token"), platform: 'APP'
        },
        formData: {},
      },
      percent:0,
      files: new Map(),
      isHasVal: false,
      uploadBtnLoading: false,
      uploadName: "", // 上传名称
      uploadTime: "", // 上传时间
      uploadUser: "", // 上传人
      accessoryUrl: [], //附件
      Title: "上传宣传通讯",
    };
  },

  onLoad(options) {
    if (options.itemParams) {
      let itemParams = JSON.parse(options.itemParams);

      this.uploadTime = itemParams.updateTime;
      this.uploadUser = itemParams.uploadUser;
      this.uploadName = itemParams.uploadName;
      this.accessoryUrl = JSON.parse(itemParams.accessoryUrl);
      this.isHasVal = true;
    } else {
      this.uploadTime = getDateFn();
      this.uploadUser = JSON.parse(
        uni.getStorageSync("loginUserInfo")
      ).userName;
    }
  },

  methods: {
    // 取消
    reset() {
      this.uploadName = ""; // 上传名称
      this.accessoryUrl = []; //附件
    },

    onChange(files) {
      this.files = files;
      this.$forceUpdate();
    },
    // 上传附件
    fileProgress(res) {
      this.percent = res.progress;
    },
    failFile() {
      uni.showToast({
	      title: '上传失败',
        icon: 'error',
        mask: true,
	      duration: 1500
      });
    },

    prevFileBnt(item) {
      prevFile(item);
    },

    // 上传宣传通讯
    uploadFileBtn() {
      if (this.uploadName == "") {
        uni.showToast({
          icon: "error",
          title: "请填写名称",
          mask: true,
          duration: 1500,
        });
        return;
      }
      if (!this.accessoryUrl.length) {
        uni.showToast({
          icon: "error",
          title: "请选择附件",
          mask: true,
          duration: 1500,
        });
        return;
      }

      let data = {
        accessoryUrl: JSON.stringify(this.accessoryUrl),
        uploadTime: this.uploadTime,
        uploadUser: this.uploadUser,
        uploadName: this.uploadName,
        djDeptId: JSON.parse(uni.getStorageSync("loginUserInfo")).djDeptId,
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid
      };
      console.log(data);
      this.uploadBtnLoading = true;
      apiUploadCommunication(data)
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.uploadBtnLoading = false;
            uni.showToast({
              title: "上传成功",
              icon: "success",
              duration: 2000,
            });
            this.reset();
          } else {
            this.uploadBtnLoading = false;
            uni.showToast({
              title: "上传失败",
              icon: "error",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({
            title: "上传失败",
            icon: "error",
            duration: 2000,
          });
          this.uploadBtnLoading = false;
        });
    },

    // 删除选择的附件
    delUploadFile(index) {
      this.accessoryUrl.splice(index, 1);
    },

    // 上传结束回调，返回参数与progress一致
    onuploadEnd(item) {
      let data = JSON.parse(item.responseText).data;
      console.log(data);
      let result = {
        accessoryUrl: data.url,
        accessoryName: data.fileName,
      };
      this.accessoryUrl.push(result);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "/static/dangjian.scss";
.mast {
  color: #e86565;
}

page {
  background: #fff;
}

.upload_com {
  width: 750rpx;
  height: 100%;
  overflow: hidden;
  font-size: 30rpx;
}

.upload_page {
  width: 100%;
  height: calc(100% - 140rpx);
  background: #fff;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.border_bottom {
  border-bottom: 1rpx solid #f4f4f4;
}

.upload_info {
  width: 100%;
  min-height: 100rpx;
  line-height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  font-weight: 500;
}

.upload_info .title {
  color: #000;
  font-size: 32rpx;
}

/* 上传附件 1*/
.upload_info .file {
  color: #0b847b;
}

.upload_info .file i {
  margin-right: 20rpx;
}

.upload_file {
  color: #0b847b;
  width: 702rpx;
  min-height: 100rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 1px solid #d6dbe3;
  padding: 0 8rpx;
  box-sizing: border-box;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upload_file .title {
  flex: 10;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload_file .close {
  flex: 1;
}

/* 上传附件 2*/

/* 上传按钮 1 */
.upload_btns {
  width: 700rpx;
  height: 88rpx;
  margin: 0 auto;
  display: flex;
  position: fixed;
  bottom: 40rpx;
}

.upload_btns button {
  width: 340rpx;
}

/* 上传按钮 2 */

::v-deep .uni-input-input,
::v-deep .uni-input-placeholder,
::v-deep .input-placeholder,
.upload_info .right {
  color: #999 !important;
  font-size: 28rpx !important;
  font-weight: normal !important;
}
.file_list .file_list_item{
  color: #0b847b;
}
</style>
